<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true">
              <el-form-item label="" label-width="80px" prop="searchValue">
                <el-input v-model="list_params.searchValue" placeholder="搜索货主名称/供货单/合同号" ></el-input>
              </el-form-item>
<!--              <el-form-item label="" prop="supplyBrandId">-->
<!--                <el-select filterable  v-model="list_params.supplyBrandId" placeholder="请选择品牌" clearable :style="{width: '100%'}">-->
<!--                  <el-option label="全部品牌" value=""></el-option>-->
<!--                  <el-option v-for="item in brand_list" :label="item.name" :value="item.id" :key="item.id" ></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="" prop="statusList">
                <el-select filterable  v-model="list_params.statusList" multiple placeholder="请选择状态" collapse-tags clearable  :style="{width: '100%'}">
                  <el-option label="全部状态" value=""></el-option>
                  <el-option v-for="item in dict.type.supply_list_status" v-if="item.value>6" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>

              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
            <el-button>删除</el-button>
            <el-button @click="handleEnable(0)" >禁用</el-button>
            <el-button @click="handleEnable(1)" >启用</el-button>
            <!-- <el-button @click="handleExport">导出</el-button>
            <el-button>导入</el-button> -->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="order_list" @selection-change="handleSelectionChange"  :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="海运国内清关公司" prop="customsClearanceCompanyName" ></el-table-column>
            <el-table-column label="合同号" prop="supplyListId" >
              <template slot-scope="scope" >
                {{scope.row.supplyList.contractNumber}}
              </template>
            </el-table-column>
            <el-table-column label="货柜号" prop="supplyListId" >
              <template slot-scope="scope" >
                {{scope.row.supplyList.containerNumber}}
              </template>
            </el-table-column>
            <el-table-column label="货主" prop="supplyListId" >
              <template slot-scope="scope" >
              {{scope.row.supplyList.cargoOwnerName}}
              </template>
            </el-table-column>
            <el-table-column label="供货商品" prop="supplyListId" >
              <template slot-scope="scope" >
              {{scope.row.supplyList.productNames}}
              </template>
            </el-table-column>
            <el-table-column label="总数量" prop="supplyListId" >
              <template slot-scope="scope" >
                {{scope.row.supplyList.totalQty}}
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="supplyListId" >
              <template slot-scope="scope" >
                <dict-tag :options="dict.type.supply_list_status" :value="scope.row.supplyList.supplyListStatus" />
              </template>
            </el-table-column>
            <el-table-column label="海运国外代理" prop="agentName" ></el-table-column>
            <el-table-column label="海运目的港" prop="portName" ></el-table-column>
            <el-table-column label="海关放行时间" prop="customsReleaseTime" ></el-table-column>
            <el-table-column label="港口提货时间" prop="portDeliveryTime" ></el-table-column>
            <el-table-column label="操作" prop="op"  fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :title="formData.id?'编辑清关清单':'新增清关清单'"
      size="80%"
      :visible.sync="dialog_show">
      <el-form :model="formData" ref="form" :rules="formDataRules" size="small" label-width="120px" >
        <div>
          <div class="section">
            <el-row>
              <el-col :span="6" style="height: 50px;">
                <el-form-item label="供货单" prop="supplyListId">
                  <div v-if="formData.id">{{formData.supplyList.contractNumber	}}</div>
                  <el-select filterable  v-else v-model="formData.supplyListId" style="width: 100%;" @change="onSupplyOrderChange" size="small">
                    <el-option v-for="item in supply_order_list" :key="item.id" :value="item.id" :label="item.contractNumber +' - '+item.containerNumber +' - '+item.cargoOwnerName" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="物流类型" prop="materialFlowType">
                  <div v-if="!supply_order_detail.id">-</div>
                  <div v-else ><dict-tag :options="dict.type.material_flow_type" :value="supply_order_detail.materialFlowType" /></div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态" prop="cargoOwnerName">
                  <div v-if="!supply_order_detail.id">-</div>
                  <div v-else ><dict-tag :options="dict.type.supply_list_status" :value="supply_order_detail.supplyListStatus"/></div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="国外代理" prop="agentId">
                  <el-select filterable  v-model="formData.agentId" style="width: 100%;" >
                    <el-option v-for="item in agent_list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="height: 50px;">
                <el-form-item label="目的港" prop="portId">
                  <el-select filterable  v-model="formData.portId" style="width: 100%;" >
                    <el-option v-for="owner in port_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="height: 50px;">
                <el-form-item label="国内清关公司" prop="customsClearanceCompanyId">
                  <el-select filterable  v-model="formData.customsClearanceCompanyId" style="width: 100%;" >
                    <el-option v-for="owner in clearance_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="海关放行时间" prop="customsReleaseTime">
                  <el-date-picker v-model="formData.customsReleaseTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="港口提货时间" prop="portDeliveryTime">
                  <el-date-picker v-model="formData.portDeliveryTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="提单号" prop="ladingNumber">
                  <el-input v-model="formData.ladingNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <div>供货单信息</div>
              </el-col>
              <el-col>
                <div style="padding-top: 12px;">
                  <el-table :data="[supply_order_detail]">
                    <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
                    <el-table-column label="货柜号" prop="containerNumber" ></el-table-column>
                    <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
                    <el-table-column label="供货产品" prop="productNames" ></el-table-column>
                    <el-table-column label="总数量" prop="totalQty" ></el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <el-row>
              <el-col>
                <div>费用明细</div>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col>
                    <el-form-item label="预估代垫运费" prop="predictTransportFee">
                      <el-input v-model="formData.predictTransportFee"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="实际代垫运费" prop="actualTransportFee">
                      <el-input v-model="formData.actualTransportFee"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="代垫运费差额" prop="actualTransportFee">
<!--                      <div>-</div>-->
<!--                      <el-input v-model=""></el-input>-->
                      {{difference(formData.predictTransportFee,formData.actualTransportFee)}}
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col>
                    <el-form-item label="预估进口税金" prop="predictImportTax">
                      <el-input v-model="formData.predictImportTax"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="实付进口税金" prop="actualImportTax">
                      <el-input v-model="formData.actualImportTax"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="税金差额" prop="cargoOwnerName">
                      {{difference(formData.predictImportTax,formData.actualImportTax)}}

                    </el-form-item>
                  </el-col>
<!--                  <el-col>-->
<!--                    <el-form-item label="收款方" prop="importTaxPayee">-->
<!--                      <el-input v-model="formData.importTaxPayee" ></el-input>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col>
                    <el-form-item label="交税时间" prop="customsClearanceFeePayTime">
                      <el-date-picker v-model="formData.importTaxPayTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col>
                    <el-form-item label="预估清关费" prop="predictCustomsClearanceFee">
                      <el-input v-model="formData.predictCustomsClearanceFee"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="实付清关费" prop="actualCustomsClearanceFee">
                      <el-input v-model="formData.actualCustomsClearanceFee"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="清关费差额" prop="cargoOwnerName">
<!--                      - -->
                      {{difference(formData.predictCustomsClearanceFee,formData.actualCustomsClearanceFee)}}

                    </el-form-item>
                  </el-col>
                  <!-- <el-col>
                    <el-form-item label="收款方" prop="customsClearanceFeePayee">
                      <el-input v-model="formData.customsClearanceFeePayee"></el-input>
                    </el-form-item>
                  </el-col> -->
                  <el-col>
                    <el-form-item label="付款时间" prop="customsClearanceFeePayTime">
                      <el-date-picker v-model="formData.customsClearanceFeePayTime"  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col>
                    <el-form-item label="预估清关费税率" prop="predictCustomsClearanceFeeTaxRate">
                      <el-radio-group v-model="formData.predictCustomsClearanceFeeTaxRate">
                        <el-radio :label="1">1</el-radio>
                        <el-radio :label="1.06">1.06</el-radio>
                        <el-radio :label="1.09">1.09</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="实际清关费税率" prop="actualCustomsClearanceFeeTaxRate">
                      <el-radio-group v-model="formData.actualCustomsClearanceFeeTaxRate">
                        <el-radio :label="1">1</el-radio>
                        <el-radio :label="1.06">1.06</el-radio>
                        <el-radio :label="1.09">1.09</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <div style="padding-bottom: 6px;">其他费用</div>
            <div>
              <el-table :data="fees" style="width: 100%" >
                <el-table-column prop="date" label="序号">
                  <template slot-scope="scope" >
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="科目">
                  <template slot-scope="scope" >
                    <el-select filterable  v-model="fees[scope.$index].financeSubjectId" >
                      <el-option v-for="fee in subject_fees" :key="fee.id" :label="fee.name	" :value="fee.id" ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="金额">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].amt" type="number"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="备注">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].remark"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="操作">
                  <template slot-scope="scope" >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="scope.$index != 0"
                      @click="delFee(scope.$index)"
                    >删除</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      @click="addFee(scope.row)"
                    >新增</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="section">
            <el-row>
              <el-col :span="8">
                <div>
                  <div style="padding-bottom: 12px;">税单附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field101" :file-list="taxFiles" :action="uploadImgUrl"
                                 :headers="headers" :on-success="field101Success" :on-remove="field101Remove"
                                 :before-upload="field101BeforeUpload"  >
                        <el-button size="small" type="">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div style="padding-bottom: 12px;">报关附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field101" :file-list="clearFiles" :action="uploadImgUrl"
                                 :headers="headers" :on-success="field102Success" :on-remove="field102Remove"
                                 :before-upload="field101BeforeUpload"  >
                        <el-button size="small" type="">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div style="padding-bottom: 12px;">其他附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field101" :file-list="otherFiles" :action="uploadImgUrl"
                                 :headers="headers" :on-success="field103Success" :on-remove="field103Remove"
                                 :before-upload="field101BeforeUpload"  >
                        <el-button size="small" type="">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>

          </div>
          <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
            <el-button type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </el-form>
    </el-drawer>
    <el-drawer
      title="清关单详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <div>
        <div class="section">
          <el-row>
            <el-col :span="4">
              <div>
                <div class="section-item-title">供货单</div>
                <div>{{ supply_order_detail.contractNumber  }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">物流类型</div>
                <div  ><dict-tag :options="dict.type.material_flow_type" :value="supply_order_detail.materialFlowType"/></div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">状态</div>
                <div  ><dict-tag :options="dict.type.supply_list_status" :value="supply_order_detail.supplyListStatus"/></div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">国外代理</div>
                <div>{{ info.agentName }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">目的港</div>
                <div>{{ info.portName }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">清关公司</div>
                <div>{{ info.customsClearanceCompanyName }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">海关放行时间</div>
                <div>{{ info.customsReleaseTime }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">港口提货时间</div>
                <div>{{ info.portDeliveryTime }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">提单号</div>
                <div>{{info.ladingNumber == ''?'-':info.ladingNumber}}</div>
              </div>
            </el-col>
            <el-col>
              <div style="padding-top: 20px;">供货单信息</div>
            </el-col>
            <el-col>
              <div style="padding-top: 12px;">
                <el-table :data="[supply_order_detail]">
                  <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
                  <el-table-column label="货柜号" prop="containerNumber" ></el-table-column>
                  <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
                  <el-table-column label="供货产品" prop="productNames" ></el-table-column>
                  <el-table-column label="总数量" prop="totalQty" ></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div style="padding-bottom: 6px;">费用明细</div>
          <el-row>
            <el-col :span="4">
              <el-row>
                <el-col>
                  <div class="section-item">
                    <div class="section-item-title">预估代垫运费</div>
                    <div>{{ info.predictTransportFee }}</div>
                  </div>
                </el-col>
                <el-col>
                  <div class="section-item bg-green">
                    <div class="section-item-title">实际代垫运费</div>
                    <div>{{ info.actualTransportFee }}</div>
                  </div>
                </el-col>
                <el-col>
                  <div class="section-item">
                    <div class="section-item-title">代垫运费差额</div>
<!--                    <div>-</div>-->
                    <div>{{difference(info.predictTransportFee,info.actualTransportFee)}}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="12">
                  <div class="section-item">
                      <div class="section-item-title">预估进口税金</div>
                      <div>{{ info.predictImportTax }}</div>
                  </div>
                </el-col>
<!--                <el-col :span="12">-->
<!--                  <div class="section-item">-->
<!--                      <div class="section-item-title">收款方</div>-->
<!--                      <div>{{ info.importTaxPayee }}</div>-->
<!--                  </div>-->
<!--                </el-col>-->

                <el-col :span="12">
                  <div class="section-item bg-green">
                    <div class="section-item-title">实付进口税金</div>
                    <div>{{ info.actualImportTax }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="section-item">
                    <div class="section-item-title">交税时间</div>
                    <div>{{ info.importTaxPayTime }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="section-item">
                    <div class="section-item-title">税金差额</div>
                    <div>{{difference(info.predictImportTax,info.actualImportTax)}}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="12">
                  <div class="section-item">
                    <div class="section-item-title">预估清关费</div>
                    <div>{{ info.predictCustomsClearanceFee }}</div>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="section-item">
                    <div class="section-item-title">收款方</div>
                    <div>{{ info.customsClearanceFeePayee }}</div>
                  </div>
                </el-col> -->

                <el-col :span="12">
                  <div class="section-item bg-green">
                    <div class="section-item-title">实付清关费</div>
                    <div>{{ info.actualCustomsClearanceFee }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="section-item">
                    <div class="section-item-title">付款时间</div>
                    <div>{{ info.customsClearanceFeePayTime }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="section-item">
                    <div class="section-item-title">清关费差额</div>
                    <div>{{difference(info.predictCustomsClearanceFee,info.actualCustomsClearanceFee)}}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row>
                <el-col >
                  <div class="section-item">
                    <div class="section-item-title">预估清关费税率</div>
                    <div>{{ info.predictCustomsClearanceFeeTaxRate }}</div>
                  </div>
                </el-col>
                <el-col >
                  <div class="section-item">
                    <div class="section-item-title">实付清关费税率</div>
                    <div>{{ info.actualCustomsClearanceFeeTaxRate }}</div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div style="padding-bottom: 6px;">其他费用</div>
          <el-table :data="fees">
            <el-table-column label="序号">
              <template slot-scope="scope" >
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="科目" prop="financeSubjectName">
            </el-table-column>
            <el-table-column label="金额" prop="amt">
            </el-table-column>
            <el-table-column label="备注" prop="remark">
            </el-table-column>
          </el-table>
          <el-row :gutter="10">
            <el-col :span="8">
              <div style="padding-top: 20px;">税单附件</div>
              <div>
                <div v-for="item in taxs" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="padding-top: 20px;">报关附件</div>
              <div>
                <div v-for="item in clears" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="padding-top: 20px;">其他附件</div>
              <div>
                <div v-for="item in others" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section" style="display: flex;justify-content: flex-end;position: sticky;width: 100%;bottom: 0px;margin: 0px;">
          <el-button type="primary" @click="editInfo">编辑</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {list as subjectList} from '@/api/base/subject'
import { list as seaList  } from '@/api/logistics/sea'
import { list as landList } from '@/api/logistics/land'
import {list,del,detail,add,update} from '@/api/clearance/order'
import {list as clearanceList} from '@/api/base/clearance'
import { list as supplyOrderList, detail as supplyOrderDetail } from '@/api/supply/order'
import {list as agentList} from "@/api/base/agent";
import {list as portList} from "@/api/base/port";
import {list as feeList} from "@/api/fee/fee";
import { getToken } from '@/utils/auth'
import { getUploadFiles,getUploadFileUrls } from '@/api/common'
export default {
  name: 'order',
  dicts:['unit','currency','supply_list_status','manage_type','material_flow_type'],
  data() {
    return {
      table_height:window.innerHeight - 300,
      dialog_show : false,
      edit_dialog_show : false,
      fees:[{ financeSubjectId:'' }],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        supplyStatus: '',
        supplyKeyword: '',
      },
      list_total: 0,
      headers:{
        Authorization: "Bearer " + getToken(),},
      taxFiles:[],
      clearFiles:[],
      otherFiles:[],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/file/upload", // 上传的图片服务器地址
      formData:{
        predictCustomsClearanceFeeTaxRate:'1',
        actualCustomsClearanceFeeTaxRate:'1',
      },
      formDataRules:{
        supplyListId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        customsClearanceCompanyId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        portId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        agentId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        customsReleaseTime:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        portDeliveryTime:[{
          message: '请选择',
          trigger: 'change'
        }],
      },
      order_list:[],
      supply_order_list:[],
      supply_order_detail:{},
      info:{},
      port_list:[],
      agent_list:[],
      clearance_list:[],
      subject_fees:[]
    }
  },
  created() {
    this.getSubjectList()
    this.getList()
    this.getSupplyOrderList()
    this.getAgentList()
    this.getClearanceList()
  },
  methods: {
    getClearanceList(){
      clearanceList({is_page:0}).then(res => {
        this.clearance_list = res.rows;
      })
    },
    getPortList(){supplyListStatus:
      portList({is_page:0,category:this.supply_order_detail.materialFlowType}).then(res => {
        this.port_list = res.rows;
      })
    },
    getAgentList(){
      agentList({is_page:0}).then(res => {
        this.agent_list = res.rows;
      })
    },
    getSupplyOrderList(){
      supplyOrderList({supplyListStatus:6,enable:1,is_page:0}).then(res => {
        console.log(res)
        this.supply_order_list = res.rows;
      })
    },
    getList(){
      list(this.list_params).then(res => {
        console.log(res)
        this.order_list = res.rows;
        this.list_total = res.total
      })
    },
    getSubjectList(){
      subjectList({is_page:0}).then(res => {
        console.log(res)
        this.subject_fees =  res.rows;
      })
    },
    handleQuery() {
      this.list_params.pageNum = 1
      if (this.list_params.statusList&&this.list_params.statusList.length != 0){
        this.list_params = {
          ...this.list_params,
          supplyListStatusList: this.list_params.statusList.join(',')
        }
      }
      this.getList()
    },
    showInfo(info){
      this.edit_dialog_show = true
      this.info = {}
      this.supply_order_detail = {}
      this.fees = []
      this.taxs = []
      this.taxFiles = []
      this.clears = []
      this.clearFiles = []
      this.others = []
      this.otherFiles = []

      detail(info.id).then(res => {
        this.info = res.data
        supplyOrderDetail(res.data.supplyListId).then(res1 => {
          this.supply_order_detail = {
            ...res1.data
          }
        })
        feeList({supplyListId:res.data.supplyListId,bizType:4,is_page:0}).then(res2 => {
          this.fees = res2.rows;
          console.log(this.fees)
        })


        let taxs = res.data.taxBillFiles;
        let clears = res.data.customsClearanceFiles;
        let others = res.data.otherFiles;
        if (taxs != ''){
          getUploadFiles(taxs).then((img_res)=>{
            this.taxs = getUploadFileUrls(img_res.data);
            this.taxFiles = this.taxs
          })
        }
        if (clears != ''){
          getUploadFiles(clears).then((img_res)=>{
            this.clears = getUploadFileUrls(img_res.data);
            this.clearFiles = this.clears

          })
        }
        if (others != ''){
          getUploadFiles(others).then((img_res)=>{
            this.others = getUploadFileUrls(img_res.data);
            this.otherFiles = this.others
          })
        }
      })
    },
    addInfo(){
      this.info = {}
      this.formData = {
        predictCustomsClearanceFeeTaxRate:1,
        actualCustomsClearanceFeeTaxRate:1,
      }
      this.supply_order_detail = {}
      this.fees = [{}]
      this.dialog_show = true
    },
    editInfo(){
      this.edit_dialog_show = false
      this.dialog_show = true
      this.fees = this.fees.length == 0?[{}]:this.fees
      this.formData = {
        ...this.info
      }
    },
    onSupplyOrderChange(){
      supplyOrderDetail(this.formData.supplyListId).then(res => {
        this.supply_order_detail = {
          ...res.data
        }
        let formData = this.formData;
        if(res.data.materialFlowType == 1){
          //国际海运
          seaList({supplyListId:this.formData.supplyListId,is_page:0}).then(res_sea=>{
            console.log(res_sea)
            if(res_sea.rows.length == 0){
              this.$message.error('未找到海运单数据')
            }else{
              let row = res_sea.rows[0];
              this.$set(this.formData,'portId',row.aimPortId)
              this.$set(this.formData,'agentId',row.agentId)
              // formData.portId = row.aimPortId;
            }
          })
        }else if(res.data.materialFlowType == 2){
          //国际陆运
          landList({supplyListId:this.formData.supplyListId,is_page:0}).then(res_sea=>{
            console.log(res_sea)
            if(res_sea.rows.length == 0){
              this.$message.error('未找到陆运单数据')
            }else{
              let row = res_sea.rows[0];
              this.$set(this.formData,'portId',row.aimPortId)
              this.$set(this.formData,'agentId',row.agentId)
              // formData.portId = row.aimPortId;
            }
          })
        }
        this.formData = formData;
        this.getPortList()
        console.log(this.formData)
      })
    },
    submitData(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // this.handleConfirm()
          let xnfFeeList = [];
          this.fees.forEach(item => {
            xnfFeeList.push({
              financeSubjectId: item.financeSubjectId,
              amt: item.amt,
              remark: item.remark,
              supplyListId:this.supply_order_detail.id,
              bizType:4
            })
          })
          this.formData = {
            ...this.formData,
            xnfFeeList: xnfFeeList
          }
          if (this.formData.id) {
            update(this.formData).then(res => {
              this.$message.success('编辑成功')
              this.dialog_show = false
              this.getList()
            })
          }else {
            add(this.formData).then(res => {
              this.$message.success('添加成功')
              this.dialog_show = false
              this.getList()
            })
          }
        } else {
          return false;
        }
      });
    },
    resetQuery(){
      this.$refs.searchForm.resetFields();

      this.list_params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },

    delFee(row){
      this.fees.splice(row,1)
    },
    addFee(row){
      this.fees.push({ remark:'' })
    },
    field101BeforeUpload(file) {
      const postfix= file.name.substring(file.name.lastIndexOf('.')+1)
      if(!this.fileSuffix.includes(postfix)){
        this.$message.error('文件类型仅支持'+this.fileSuffix);
        return false
      }
      console.log(postfix)
    },
    field101Success(e){
      console.log('field101Success')
      console.log(e)
      let imgFiles = this.formData.taxBillFiles?this.formData.taxBillFiles:'';
      console.log(imgFiles)
      let imgs = imgFiles == ''?[]:imgFiles.split(',');
      imgs.push(e.data.id)
      this.formData = {
        ...this.formData,
        taxBillFiles:imgs.join(',')
      }
      console.log(this.formData)
    },
    field101Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        taxBillFiles:ids.join(','),
      }
    },
    field102Success(e){
      console.log(e)
      let docFiles = this.formData.customsClearanceFiles?this.formData.customsClearanceFiles:'';
      let docs = docFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.formData = {
        ...this.formData,
        customsClearanceFiles:docs.join(',')
      }
    },
    field102Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        customsClearanceFiles:ids.join(','),
      }
    },
    field103Success(e){
      console.log(e)
      let otherFiles = this.formData.otherFiles?this.formData.otherFiles:'';
      let docs = otherFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.formData = {
        ...this.formData,
        otherFiles:docs.join(',')
      }
    },
    field103Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        otherFiles:ids.join(','),
      }
    },
    openNav(url){
      window.open(url)
    },
    difference(a, b) {
      if(!a||!b){
        return '-';
      }
      return (a-b).toFixed(2);
    }

  }
}
</script>

<style scoped>

</style>

<style scoped>
.section{
  background: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}
.bg-green{
  background: #13CE66;
}
</style>
